<!--  -->
<template>
  <div style="width: 100%;">
    <a-table bordered
             :width="500"
             :pagination="false"
             :columns="showColumns"
             :data-source="dataArr"
             :scroll="{x:300}"
    >
      <!--项目名称（二级）-->
      <template slot="node" slot-scope="text,record">
        <a-tag color="blue" style="margin-bottom: 10px;" v-for="item in text">{{item.keyValue}}</a-tag>
      </template>
    </a-table>
  </div>
</template>

<script>
const tempData = [
  {
    keyValue: '一级名称1',
    node: [
      {
        groupName: '二级一1'
      },
      {
        groupName: '二级er2'
      },
      {
        groupName: '二级一3'
      },
      {
        groupName: '二级er4'
      },
      {
        groupName: '二级一5'
      },
      {
        groupName: '二级er6'
      }
    ]
  },
  {
    keyValue: '一级名称2',
    node: [
      {
        groupName: '二级一1'
      },
      {
        groupName: '二级er2'
      },
      {
        groupName: '二级一3'
      },
      {
        groupName: '二级er4'
      },
      {
        groupName: '二级一5'
      },
      {
        groupName: '二级er6'
      }
    ]
  },
  {
    keyValue: '一级名称3',
    node: [
      {
        groupName: '二级一1'
      },
      {
        groupName: '二级er2'
      },
      {
        groupName: '二级一3'
      },
      {
        groupName: '二级er4'
      },
      {
        groupName: '二级一5'
      },
      {
        groupName: '二级er6'
      }
    ]
  }
]
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'JYFWNewItem',
  components: {},
  props: {
    dataArr: {
      type: Array,
      required: true,
      default: []
    }
  },
  data() {
    // 这里存放数据
    return {
      dalaList_: tempData,
      showColumns: [
        {
          title: '项目名称（一级）',
          dataIndex: 'groupName',
          width: 150,
          ellipsis: true,
          align: 'center'
        },
        {
          title: '项目名称（二级）',
          dataIndex: 'node',
          scopedSlots: {customRender: 'node'},
          width: 300,
          align: 'center'
        },
      ],
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {}
}
</script>
<style lang="less" >

</style>
